<template>
  <view class="map_wrap" style="height: 100%;">
    <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar
      @clickLeft="clickLeft"
			title="寻梦周边" left-icon="location" :leftText="address" leftWidth="70px" rightWidth="70px"/>
      
				<!-- subkey="X4ZBZ-VNRKL-XNHPV-MN4KJ-ANQKZ-ZEBSJ" -->
      <map id="mapSelected"  style="width: 100%;height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers" :controls="controls" :scale="10" @tap="clickMap" 
      @regionchange="regionchange" @markertap="markertap"   @callouttap='callouttap'>
      </map>
      <!-- <view class="item">
        <view class="t">当前地址：</view>
        <view class="m">{{address}}</view>
      </view> -->
      <!-- <map subkey="IHJBZ-5MQCL-6JNPP-MI3RB-7U6KF-77FKB" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map> -->

  <tabbar></tabbar>

  </view>
</template>

<script>
import { route } from 'uview-plus';

export default {
  data() {
    return {
      cardPositionList:[{"title":"SS级卡片等待解锁","location":{"lat":"39.909","lng":"116.39742"}}],
      tabBar: "",
      currentIndex: 0,
      title: 'map',
      latitude: 39.9,// 默认纬度
      longitude: 116.312,// 默认经度(北京天安门)
      covers: [{
        id: 110, 
        latitude: 39.9,
        longitude: 116.397,
        callout:{//自定义标记点上方的气泡窗口 点击有效  
              content:'SSS级卡片等待解锁',//文本
              color:'#ffffff',//文字颜色
              fontSize:14,//文本大小
              borderRadius:15,//边框圆角
              borderWidth:'10',
              bgColor:'#F2B54A',//背景颜色
              display:'ALWAYS',//常显
        },
        iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
        width: "30",
        height: "30",
        alpha:0.5
      },{
        id: 2, 
        latitude: 39.8,
        longitude: 116.4,
        callout:{//自定义标记点上方的气泡窗口 点击有效  
              content:'A级卡片等待解锁',//文本
              color:'#ffffff',//文字颜色
              fontSize:14,//文本大小
              borderRadius:15,//边框圆角
              borderWidth:'10',
              bgColor:'#A5E718',//背景颜色
              display:'ALWAYS',//常显
        },
        iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
        width: "30",
        height: "30",
        alpha:0.5
      },{
        id: 1, 
        latitude: 39.9,
        longitude: 116.2,
        callout:{//自定义标记点上方的气泡窗口 点击有效  
              content:'SS级卡片等待解锁',//文本
              color:'#ffffff',//文字颜色
              fontSize:14,//文本大小
              borderRadius:15,//边框圆角
              borderWidth:'10',
              bgColor:'#e51860',//背景颜色
              display:'ALWAYS',//常显
        },
        iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
        width: "30",
        height: "30",
        alpha:0.5
      }],
      controls: [{ // 控件
        id: 99,
        position: { // 控件位置
          left: 160,
          top: 120
        },
        iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
      }],
      address_info :"",
      address_info_recomd:"",
      address :""
    }
  },
  onLoad(){
    // this.isGetLocation();
  },
  methods: {
    clickLeft() {
          // uni.showToast({
          // 	title: '左侧按钮'
          // })
          var _this = this
          _this.getLocationInfo()
        },
    click1(e){
      // console.log('click1', e);
      // var _this = this;
      
      // if(e==0){
      //   return;
      // }
      route({url:'pages/user/index', type:'tab'});
      // uni.navigateTo({
      //   url: '/pages/user/index',
      // })
      
    },
    isGetLocation(a = "scope.userLocation") { //检查当前是否已经授权访问scope属性
      var _this = this;
      uni.getSetting({
          success(res) {
              console.log(res)
              if (!res.authSetting[a]) { //每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
                  _this.getAuthorizeInfo()
              } else {
                  //方式一
                  // _this.getLocationInfo();
                  // 方式二
                  _this.getLocation();
              }
          }
      });
    },
    getAuthorizeInfo(a = "scope.userLocation") { // uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
        var _this = this;
        uni.authorize({
            scope: a,
            success() { //允许授权
          //方式一
                // _this.getLocationInfo();
          // 方式二
          _this.getLocation();
            }
        })
    },
    //点击地图时
    clickMap(e){
      console.log("点击地图时:"+e);
      console.log(e.detail.latitude)
      console.log(e.detail.longitude)
      this.latitude=e.detail.latitude;
      this.longitude = e.detail.longitude;
    },
    getLocationInfo () {
      //直接调用即可
        uni.chooseLocation({
            success: (res) => {
              console.log(res)
              if(res.errMsg == "chooseLocation:ok"){
                this.address_info = res.name + res.address;
                this.latitude= res.latitude;
                this.longitude = res.longitude;
                // 获取地理位置详情信息
                this.getLocationDetail()
              }
            }
        })
    },
    //获取当前所在位置的经纬度
    getLocation(){
      uni.getLocation({
          type: 'gcj02',
          success: (res) => {
              console.log(res)
              this.latitude = res.latitude.toString()
              this.longitude = res.longitude.toString()
                              
              // 获取地理位置详情信息
              this.getLocationDetail()
          }
      });
    },
    //根据经纬度获取详细的地址
    getLocationDetail () {
        uni.request({
            header: {
                "Content-Type": "application/text"
            },
            url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + this.latitude + ',' + this.longitude +
                            '&key=X4ZBZ-VNRKL-XNHPV-MN4KJ-ANQKZ-ZEBSJ',
            success:(re)=> {
                //成功获取到经纬度
                console.log(re)
                if (re.statusCode == 200) {
                    this.address_info_recomd = re.data.result.formatted_addresses.recommend
                    this.address_info = re.data.result.address_reference.town.title + re.data.result.address_reference.street.title + re.data.result.address_reference.landmark_l2.title
                    this.address = re.data.result.address_reference.town.title
                                
                } else {
                    uni.showToast({
                        title: '获取地理位置失败，请重试',
                        icon: "none"
                    })
                }
            }
        });
    },
    //根据经纬度获取详细的地址
    // https://apis.map.qq.com/place_cloud/search/nearby?keyword=营业部西城区&location=39.940567,116.343687&radius=1000&auto_extend=1&filter=x.price>18 and x.price<=20 and x.star>=3&orderby=x.price desc&table_id=5d3581dc6ce89813ed0b2cbd&key=开发者key
    
    // 在地图渲染更新完成时触发
    regionchange (e) {
      // console.log(e)
      if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
        this.mapCtx = uni.createMapContext("mapSelected"); // 创建map的上下文对象, 从而操控map组件
        this.mapCtx.getCenterLocation({
          success: (res) => {
            // console.log(res)
            this.latitude = res.latitude;
            this.longitude = res.longitude;
            // this.getLocationDetail();
          }
        })
      }
    },
    //地图点击事件
    markertap(e) {
      console.log("===你点击了标记点===",e)
    },
    //地图点击事件
    callouttap(e){
        uni.navigateTo({url:'../../pages/game/index'})
    }
  }
}
</script>
<style >
</style>
